<template>
  <div>
    <div style="width: 100%; height: 100vh; overflow: hidden" class="bgImg">
      <div style="width: 450px; height: 380px;background-color:rgba(0, 0, 0, 0.6);  border-radius: 10px;
        margin: 160px 850px;">

        <div style="width: 260px; margin: 0 auto; padding-top: 30px">
          <div class="item" style="font-size: 25px; font-weight: 700;color: #838B8B;">CREATE　　ACCOUNT</div>
          <div class="item">
            <input type="text" class="inputItem" v-model="user.username" style="width: 100%; padding: 10px; border-radius: 5px;" placeholder="请输入用户名">
          </div>
          <div class="item">
            <input v-model="user.phone" class="inputItem" style="width: 100%; padding: 10px; border-radius: 5px; box-sizing:border-box;"  placeholder="请输入手机号">
          </div>
          <div class="item">
            <input type="password" class="inputItem" v-model="user.password"  style="width: 100%; padding: 10px; border-radius: 5px; box-sizing:border-box;"  placeholder="请输入密码">
          </div>
          <div class="item">
            <input type="password" class="inputItem" v-model="user.confirm"  style="width: 100%; padding: 10px; border-radius: 5px; box-sizing:border-box;"  placeholder="请确认密码">
          </div>
          <div class="item">
            <button style="background: dodgerblue;  border-radius: 5px; color: white; width: 100%; padding: 10px; cursor: pointer" @click="register">注册</button>
          </div>
          <div style="padding: 10px 0; text-align: right">
            <span style="cursor: pointer; color: #409EFF;font-size: 15px;" @click="$router.push('/login')">去登录</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import API from "@/utils/request";

export default {
  name: "Register",
  data() {
    return {
      user: {}
    }
  },
  methods: {
    register() {
      if (!this.user.username) {
        this.$message({
          type: "error",
          message: "请输入用户名",
          duration:1000
        })
        return
      }
      if (!this.user.phone) {
        this.$message({
          type: "error",
          message: "请输入手机号",
          duration:1000
        })
        return
      }
      if (!this.user.password) {
        this.$message({
          type: "error",
          message: "请输入密码",
          duration:1000
        })
        return
      }
      if (!this.user.confirm) {
        this.$message({
          type: "error",
          message: "请确认密码",
          duration:1000
        })
        return
      }
      if (this.user.password !== this.user.confirm) {
        this.$message({
          type: "error",
          message: "密码输入不一致",
          duration:1000
        })
        return
      }
      API.post("/api/user/register", this.user).then(res => {
        if (res.code === '0') {
          this.$message({
            type: "success",
            message: "注册成功",
            duration:800
          })
          this.$router.replace("/login")
        } else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
      })
    }
  }
}
</script>

<style scoped>
  .bgImg {
    background: url("../assets/bg9.jpg") no-repeat;
    background-size: 100% 100vh;
  }
  .item {
    text-align: center;
    padding: 8px 0
  }
  .inputItem {
  letter-spacing: 0.15px;
  border: none;
  outline: none;
  font-family: 'Montserrat', sans-serif;
  background-color: #ecf0f3;
  transition: 0.25s ease;
  border-radius: 8px;
  box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
}
button:hover{
  box-shadow: 4px 4px 6px 0 rgb(255 255 255 / 50%),
        -4px -4px 6px 0 rgb(116 125 136 / 50%),
        inset -4px -4px 6px 0 rgb(255 255 255 / 20%),
        inset 4px 4px 6px 0 rgb(0 0 0 / 40%);
}
</style>
